<template>
  <div class="sign">
    <h3>用户登录</h3>
    <el-row class="sign-row" >
      <el-col :span="4">用户名</el-col>
      <el-col :span="12">
          <el-input v-model="username" placeholder="用户名" clearable />
      </el-col>
      <el-col :span="8" :class="{ failure: usernameInvalid , succee: usernameValid }">
          {{ usernameTip }}
      </el-col>
    </el-row>
    <el-row class="sign-row">
        <el-col :span="4">密码</el-col>
        <el-col :span="12">
            <el-input type="password" v-model="password" placeholder="密码" show-password />
        </el-col>
        <el-col :span="8" :class="{ failure: passwordInvalid , succee: passwordValid }">
            {{ passwordTip }}
        </el-col>
    </el-row>
    <el-row class="sign-row">
      <el-col :span="12" :offset="4">
          <el-button type="primary" @click="signIn">登录</el-button>
      </el-col>
    </el-row>
    <el-row class="sign-row">
      <el-col :span="12" :offset="4">
          <router-link :to="{ name: 'signUp' }" >没有账号，点此注册</router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: 'SignIn' ,
    data(){
        return {
            username: '' ,
            usernameInvalid: true ,
            usernameValid: false ,
            usernameTip: '' ,
            password: '' ,
            passwordInvalid: true ,
            passwordValid: false ,
            passwordTip: '' 
        }
    },
    methods: {
        signIn(){
            // 调用另一个方法完成数据校验
            if( this.validate() ) {
                sessionStorage.setItem( 'username' , this.username );
                // 编程式导航
                this.$router.push( { name : 'main' } );
            }
        },
        validate(){
            const usernameRegexp = /\w{5,10}/ ;
            // 若用户名不匹配指定的正则表达式
            if( !usernameRegexp.test( this.username ) ){
                this.usernameTip = '用户名不符合要求' ;
                this.usernameInvalid = true ;
                this.usernameValid = false ;
                return false ;
            }

            this.usernameTip = '用户名符合要求' ;
            this.usernameInvalid = false ;
            this.usernameValid = true ;

            const passwordRegexp = /[A-Za-z0-9_]{6,16}/ ;
            if( !passwordRegexp.test( this.password ) ){
                this.passwordTip = '密码不符合要求' ;
                this.passwordInvalid = true ;
                this.passwordValid = false ;
                return false ;
            }
            
            this.passwordTip = '密码符合要求' ;
            this.passwordInvalid = false ;
            this.passwordValid = true ;

            // 从 根组件的 users 数组中获取 this.username 对应的 user 对象
            let user = this.$root.users.find( u => u.username == this.username );
            // 如果 user 未找到，说明用户名错误
            if( !user ){
                this.usernameTip = '用户名错误' ;
                this.usernameInvalid = true ;
                this.usernameValid = false ;
                return false ;
            }

            this.usernameTip = '用户名正确' ;

            if( user.password != this.password ){
                this.passwordTip = '密码错误' ;
                this.passwordInvalid = true ;
                this.passwordValid = false ;
            }

            this.passwordTip = '密码正确' ;


            return true ;
        }
    }
}
</script>

<style scoped>
.sign-row {
    line-height: 50px ;
}
.failure {
    color: red ;
    font-size: 14px ;
}
.succee {
    color: green ;
    font-size: 14px ;
}
</style>